import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/AntDesign';
export default function NavigationBar(props) {
  let title = props.title;
  let leftViews = props.leftViews;
  let rightViews = props.rightViews;
  let titleViews = props.titleViews;
  let goBack = props.goBack;
  return (
    <View style={styles.container}>
      <View style={styles.leftBarButtons}>
        {leftViews ? (
          leftViews
        ) : (
          <TouchableOpacity onPress={goBack}>
            <Icon name="arrowleft" color="white" size={24} />
          </TouchableOpacity>
        )}
      </View>
      <View style={styles.middleView}>
        {titleViews ? titleViews : <Text style={styles.title}>{title}</Text>}
      </View>
      <View style={styles.rightBarButtons}>
        {rightViews ? rightViews : null}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingLeft: 16,
    paddingRight: 16,
    height: 44,
    alignItems: 'center',
  },
  leftBarButtons: {},
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
  middleView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  rightBarButtons: {},
});
